<!DOCTYPE HTML>
<HTML>
<HEAD>
    <META content="IE=11.0000"
          http-equiv="X-UA-Compatible">

    <META charset="utf-8">
    <META name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <TITLE>mylove</TITLE>
    <script>
        /**微信环境中**/
        document.addEventListener("WeixinJSBridgeReady", function () {
            audioAutoPlay('mymusic');
        }, false);
    </script>
    <STYLE>
        html, body {
            height: 100%;
        }

        body {
            background-color: #000000;
            margin: 0;
            font-family: Arial;
            overflow: hidden;
        }

        a {
            color: #ffffff;
        }

        #info {
            position: absolute;
            width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            font-weight: bold;
            text-align: center;
        }

        #menu {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
        }

        .element {
            width: 120px;
            height: 160px;
            box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
            border: 1px solid rgba(127, 255, 255, 0.25);

            cursor: default;
        }

        .element:hover {
            box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
            border: 1px solid rgba(127, 255, 255, 0.75);
        }

        .element img {
            position: absolute;
            border: none;
        }

        .element .number {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 12px;
            color: rgba(127, 255, 255, 0.75);
        }

        .element .symbol {
            position: absolute;
            top: 40px;
            left: 0px;
            right: 0px;
            font-size: 60px;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.75);
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
        }

        .element .details {
            position: absolute;
            bottom: 15px;
            left: 0px;
            right: 0px;
            font-size: 12px;
            color: rgba(127, 255, 255, 0.75);
        }

        button {
            color: rgba(127, 255, 255, 0.75);
            background: transparent;
            outline: 1px solid rgba(127, 255, 255, 0.75);
            border: 0px;
            padding: 5px 10px;
            cursor: pointer;
        }

        button:hover {
            background-color: rgba(0, 255, 255, 0.5);
        }

        button:active {
            color: #000000;
            background-color: rgba(0, 255, 255, 0.75);
        }

        @media screen and (max-width: 800px) {
            /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
            #weixin {
                display: none;
            }

            #demo {
                display: none;
            }

            #info {
                display: none;
            }
        }
    </STYLE>

    <META name="GENERATOR" content="MSHTML 11.00.9600.16476">

    <link href="/pper/css/lightbox.css" rel="stylesheet"/>
    <!--    <link rel="stylesheet" href="music/css/music.css">-->
</HEAD>
<BODY>

<script src="/pper/js/jquery-1.10.2.min.js"></script>

<script src="/pper/js/lightbox-2.6.min.js"></script>

<SCRIPT src="/pper/js/three.min.js"></SCRIPT>

<SCRIPT src="/pper/js/tween.min.js"></SCRIPT>

<SCRIPT src="/pper/js/TrackballControls.js"></SCRIPT>

<SCRIPT src="/pper/js/CSS3DRenderer.js"></SCRIPT>
<audio src="" id="mymusic" autoplay="true" preload="auto" loop="loop"></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var is_first = false;

    window.onload = function () {
        audioAutoPlay('mymusic');
        var isChrome = navigator.userAgent.indexOf('Chrome') > -1;  // 是否是谷歌
        if (isChrome) {
            window.onclick = function () {
                console.log(is_first);
                if (!is_first) {
                    audioAutoPlay('mymusic');
                     is_first = true;
                }
            }
        }
    };

    function audioAutoPlay(id) {
        var mp3List = [
            "风吹一夏.mp3"
        ];
        var n = Math.floor(Math.random() * mp3List.length + 1) - 1;
        var audio = document.getElementById(id);
        audio.src = '/music/' + mp3List[n];
        audio.play();
    }

    // 解决ios音乐不自动播放的问题

    //mp3文件名
    var mp3List = [
            "风吹一夏.mp3"
        ],
        //文件路径
        baseUrl = '/music/';

    function getMusic(list) {

        var len = list.length,
            num = parseInt(Math.random() * len, 10),
            music = baseUrl + list[num];

        if (music) {

            return music;

        } else {

            getMusic(list, baseUrl);

        }

    }

    //查看是否支持audio标签，如果支持，预加载当前指向mp3文件
    function canPlay(callback) {

        var currentFile = getMusic(mp3List);
        try {
            var audio = new Audio();

            audio.oncanplay = function () {
                callback(currentFile);
            }

            audio.src = currentFile;

            audio.load();
        } catch (e) {
            callback(false, e);
        }
    }

    //play
    function playAudio(currentFile) {
        // Check for audio element support.
        if (window.HTMLAudioElement && currentFile) {
            try {
                var oAudio = document.getElementById('mymusic');

                oAudio.src = currentFile;

                if (oAudio.paused) {
                    oAudio.play();
                } else {
                    oAudio.pause();
                }

                oAudio.onended = function () {
                    oAudio.src = getMusic(mp3List);
                    oAudio.play();
                }

            } catch (e) {
                // Fail silently but show in F12 developer tools console

            }
        }
    }
</script>
</body>
<DIV id="container"></DIV>
<DIV id="info">

</DIV>
<DIV id="menu">
    <BUTTON id="table">照片墙</BUTTON>
    <BUTTON id="sphere">水晶球</BUTTON>
    <BUTTON id="helix">螺旋塔</BUTTON>
    <BUTTON id="grid">展览厅</BUTTON>

    <SCRIPT>
        document.write('</br><font size="1" color="white">我能想到最浪漫的事，就是和你一起慢慢变老。(还有背景音乐的哟！)</font>');
    </SCRIPT>

    <SCRIPT>
        //建议值[18,6]
        var table = [];

        var camera, scene, renderer;
        var controls;

        var objects = [];
        var targets = {table: [], sphere: [], helix: [], grid: []};

        getImgs();
        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 3000;

            scene = new THREE.Scene();


            for (var i = 0; i < table.length; i++) {

                var element = document.createElement('div');
                element.className = 'element';
                element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

                var a = document.createElement('a');
                a.href = table[i][0];
                a.setAttribute('data-lightbox', 'roadtrip');
                a.setAttribute('title', a.href.substr(a.href.lastIndexOf('/') + 1));

                var image = new Image();
                image.src = table[i][0];
                image.width = 200;
                image.height = 200;
                a.appendChild(image);
                element.appendChild(a);

                var object = new THREE.CSS3DObject(element);
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add(object);

                objects.push(object);

                var object = new THREE.Object3D();
                object.position.x = (table[i] [1] * 140) - 1330;
                object.position.y = -(table[i] [2] * 180) + 990;
                targets.table.push(object);

                image.addEventListener('load', function (event) {
                    resizeImg(this, 120, 160);
                }, false);

            }

            var vector = new THREE.Vector3();

            for (var i = 0, l = objects.length; i < l; i++) {

                var phi = Math.acos(-1 + (2 * i) / l);
                var theta = Math.sqrt(l * Math.PI) * phi;

                var object = new THREE.Object3D();

                object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
                object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
                object.position.z = 800 * Math.cos(phi);

                vector.copy(object.position).multiplyScalar(2);

                object.lookAt(vector);

                targets.sphere.push(object);

            }

            // helix

            var vector = new THREE.Vector3();

            for (var i = 0, l = objects.length; i < l; i++) {

                var phi = i * 0.175 + Math.PI;

                var object = new THREE.Object3D();

                object.position.x = 900 * Math.sin(phi);
                object.position.y = -(i * 8) + 450;
                object.position.z = 900 * Math.cos(phi);

                vector.x = object.position.x * 2;
                vector.y = object.position.y;
                vector.z = object.position.z * 2;

                object.lookAt(vector);

                targets.helix.push(object);

            }

            // grid

            for (var i = 0; i < objects.length; i++) {

                var object = new THREE.Object3D();

                object.position.x = ((i % 5) * 400) - 800;
                object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
                object.position.z = (Math.floor(i / 25)) * 1000 - 2000;

                targets.grid.push(object);

            }

            //

            renderer = new THREE.CSS3DRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.domElement.style.position = 'absolute';
            document.getElementById('container').appendChild(renderer.domElement);

            //

            controls = new THREE.TrackballControls(camera, renderer.domElement);
            controls.rotateSpeed = 0.5;
            controls.minDistance = 500;
            controls.maxDistance = 6000;
            controls.addEventListener('change', render);

            var button = document.getElementById('table');
            button.addEventListener('click', function (event) {

                transform(targets.table, 2000);

            }, false);

            var button = document.getElementById('sphere');
            button.addEventListener('click', function (event) {

                transform(targets.sphere, 2000);

            }, false);

            var button = document.getElementById('helix');
            button.addEventListener('click', function (event) {

                transform(targets.helix, 2000);

            }, false);

            var button = document.getElementById('grid');
            button.addEventListener('click', function (event) {

                transform(targets.grid, 2000);

            }, false);

            transform(targets.table, 5000);
            //transform( targets.helix, 2000 );
            //

            window.addEventListener('resize', onWindowResize, false);

        }

        function transform(targets, duration) {

            TWEEN.removeAll();

            for (var i = 0; i < objects.length; i++) {

                var object = objects[i];
                var target = targets[i];

                new TWEEN.Tween(object.position)
                    .to({
                        x: target.position.x,
                        y: target.position.y,
                        z: target.position.z
                    }, Math.random() * duration + duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();

                new TWEEN.Tween(object.rotation)
                    .to({
                        x: target.rotation.x,
                        y: target.rotation.y,
                        z: target.rotation.z
                    }, Math.random() * duration + duration)
                    .easing(TWEEN.Easing.Exponential.InOut)
                    .start();

            }

            new TWEEN.Tween(this)
                .to({}, duration * 2)
                .onUpdate(render)
                .start();

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            requestAnimationFrame(animate);

            TWEEN.update();
            controls.update();

        }

        function render() {

            renderer.render(scene, camera);

        }

        // 说明：用 JavaScript 实现网页图片等比例缩放
        function resizeImg(image, distWidth, distHeight) {
            srcWidth = image.width;
            srcHeight = image.height;
            var ratio = 1;
            if (srcWidth > 0 && srcHeight > 0) {
                if (srcWidth / srcHeight >= distWidth / distHeight) {
                    if (srcWidth > distWidth) {
                        ratio = distWidth / srcWidth;
                    }
                } else {
                    if (srcHeight > distHeight) {
                        ratio = distHeight / srcHeight;
                    }
                }
            }
            var width = srcWidth * ratio;
            var heigh = srcHeight * ratio;

            image.style.width = width.toString() + 'px';
            image.style.height = heigh.toString() + 'px';

            if (width < distWidth)
                image.style.paddingLeft = ((distWidth - width) / 2).toString() + 'px';

            if (heigh < distHeight)
                image.style.paddingTop = ((distHeight - heigh) / 2).toString() + 'px';
        }

        //获得指定文件夹图片名称列表，同时设置图片的位置
        function getImgs() {
            var arrfiles = <?php
                echo json_encode($data);
                ?>;
            var row = 1;
            var col = 1;
            for (var i = 0; i < arrfiles.length; i++) {
                var file = [];
                var thumb = [];
                file[0] = arrfiles[i]['savePath'];
                file[1] = col++;
                file[2] = row;
                table[i] = file;
                thumb[0] = arrfiles[i]['thumb_image'];
                thumb[1] = file[1];
                thumb[2] = row;
                table['thumb_' + i] = thumb;
                if (col > 18) {
                    col = 1;
                    row++;
                }
            }
            //console.log(table)
        }

        //判断浏览器类型
        function isBrowser() {
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
                (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                            (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
            if (!(Sys.chrome || Sys.firefox)) {//Js判断为谷歌chrome浏览器
                alert("使用谷歌chrome、火狐firefox，3D效果更佳");
            }
        }

    </SCRIPT>
</DIV>
</BODY>
</HTML>
